import LogicFlow from "@logicflow/core";
import { Snapshot, DndPanel, lfJson2Xml } from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";

const lf = new LogicFlow({
  container: document.querySelector("#app"),
  grid: true,
  plugins: [DndPanel, Snapshot]
});

lf.setPatternItems([
  {
    type: "circle",
    text: "开始",
    label: "圆",
    icon:
      ""
  },
  {
    type: "rect",
    label: "矩形",
    icon:
      ""
  }
]);

lf.render({
  nodes: [
    {
      id: "node_1",
      type: "rect",
      x: 100,
      y: 200
    },
    {
      id: "node_2",
      type: "circle",
      x: 300,
      y: 150
    }
  ],
  edges: [
    {
      sourceNodeId: "node_1",
      targetNodeId: "node_2",
      type: "polyline"
    }
  ]
});

function download(filename, text) {
  var element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);

  element.style.display = "none";
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

document.querySelector("#js_download-img").addEventListener("click", () => {
  lf.getSnapshot();
});

document.querySelector("#js_download-xml").addEventListener("click", () => {
  const data = lf.getGraphData();
  download("logicflow.xml", lfJson2Xml(data));
});
